<template>
    <div class="app-container">
        <!-- 查询表单 -->
        <el-card shadow="hover" class="mb10">
            <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch">
                <el-form-item label="文件名" prop="fileName">
                    <el-input
                        v-model="queryParams.fileName"
                        placeholder="请输入文件名"
                        clearable
                        style="width: 200px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="原名" prop="originalName">
                    <el-input
                        v-model="queryParams.originalName"
                        placeholder="请输入原名"
                        clearable
                        style="width: 200px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="文件后缀" prop="fileSuffix">
                    <el-input
                        v-model="queryParams.fileSuffix"
                        placeholder="请输入文件后缀"
                        clearable
                        style="width: 200px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="创建时间">
                    <el-date-picker
                        v-model="daterangeCreateTime"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        type="daterange"
                        range-separator="-"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                        :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
                    />
                </el-form-item>
                <el-form-item label="上传人" prop="createBy">
                    <el-input
                        v-model="queryParams.createBy"
                        placeholder="请输入上传人"
                        clearable
                        style="width: 200px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item label="服务商" prop="service">
                    <el-input
                        v-model="queryParams.service"
                        placeholder="请输入服务商"
                        clearable
                        style="width: 200px"
                        @keyup.enter.native="handleQuery"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
                    <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>

        <!-- 表格及工具栏 -->
        <el-card shadow="hover" class="mb10">
            <div slot="header">
                <el-row :gutter="10" class="mb8">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-upload" @click="handleFile">
                            上传文件
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-upload" @click="handleImage">
                            上传图片
                        </el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            type="danger"
                            plain
                            icon="el-icon-delete"
                            :disabled="multiple"
                            @click="handleDelete"
                        >删除</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            :type="previewListResource ? 'warning' : 'danger'"
                            plain
                            @click="handlePreviewListResource(!previewListResource)"
                        >预览开关 : {{ previewListResource ? "启用" : "禁用" }}</el-button>
                    </el-col>
                    <el-col :span="1.5">
                        <el-button
                            type="info"
                            plain
                            icon="el-icon-setting"
                            @click="handleOssConfig"
                        >配置管理</el-button>
                    </el-col>
                    <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" />
                </el-row>
            </div>

            <el-table
                v-loading="loading"
                :data="ossList"
                @selection-change="handleSelectionChange"
                :header-cell-class-name="handleHeaderClass"
                @header-click="handleHeaderCLick"
                v-if="showTable"
            >
                <el-table-column type="selection" width="55" align="center" />
                <el-table-column label="文件名" align="center" prop="fileName" />
                <el-table-column label="原名" align="center" prop="originalName" />
                <el-table-column label="文件后缀" align="center" prop="fileSuffix" />
                <el-table-column label="文件展示" align="center" prop="url">
                    <template slot-scope="scope">
                        <ImagePreview
                            v-if="previewListResource && checkFileSuffix(scope.row.fileSuffix)"
                            :width="100"
                            :height="100"
                            :src="scope.row.url"
                        />
                        <span v-else>{{ scope.row.url }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="创建时间" align="center" prop="createTime" width="180" sortable="custom">
                    <template slot-scope="scope">
                        <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="上传人" align="center" prop="createBy" />
                <el-table-column label="服务商" align="center" prop="service" sortable="custom" />
                <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                    <template slot-scope="scope">
                        <el-button link type="text" icon="el-icon-download" @click="handleDownload(scope.row)" >下载</el-button>
                        <el-button link type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" >删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination
                v-show="total > 0"
                :total="total"
                :page.sync="queryParams.pageNum"
                :limit.sync="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>

        <!-- 添加或修改文件弹窗 -->
        <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
            <el-form ref="ossRef" :model="form" :rules="rules" label-width="80px">
                <el-form-item label="文件名">
                    <file-upload v-model="form.file" @over="handleUploadOver" v-if="type === 0" />
                    <image-upload v-model="form.file" @over="handleUploadOver" v-if="type === 1" />
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { listOss, delOss } from "@/api/oss";

export default {
    name: "Oss",
    data() {
        return {
            queryParams: {
                pageNum: 1,
                pageSize: 10,
                fileName: undefined,
                originalName: undefined,
                fileSuffix: undefined,
                url: undefined,
                createTime: undefined,
                createBy: undefined,
                service: undefined,
                orderByColumn: 'createTime',
                isAsc: 'ascending'
            },
            form: {
                file: undefined
            },
            rules: {
                file: [{ required: true, message: "文件不能为空", trigger: "blur" }]
            },
            ossList: [],
            total: 0,
            open: false,
            type: 0,
            title: '',
            loading: true,
            showTable: true,
            showSearch: true,
            daterangeCreateTime: [],
            ids: [],
            single: true,
            multiple: true,
            previewListResource: true
        };
    },
    created() {
        this.getList();
    },
    methods: {
        getList() {
            this.loading = true;
            // getConfigKey("sys.oss.previewListResource").then(res => {
            //     this.previewListResource = !!res.data;
            // });
            if (null != this.daterangeCreateTime && '' != this.daterangeCreateTime) {
                this.queryParams.params = {};
                this.queryParams.params["beginCreateTime"] = this.daterangeCreateTime[0];
                this.queryParams.params["endCreateTime"] = this.daterangeCreateTime[1];
            }
            listOss(this.queryParams).then(res => {
                this.ossList = res.rows;
                this.total = res.total;
                this.loading = false;
                this.showTable = true;
            });
        },
        checkFileSuffix(suffix) {
            return ["png", "jpg", "jpeg", "gif"].some(type => suffix.includes(type));
        },
        handleQuery() {
            this.queryParams.pageNum = 1;
            this.getList();
        },
        resetQuery() {
            this.showTable = false;
            this.daterangeCreateTime = [];
            resetForm(this.$refs.queryRef);
            this.queryParams.orderByColumn = "createTime";
            this.queryParams.isAsc = "ascending";
            this.handleQuery();
        },
        handleSelectionChange(selection) {
            this.ids = selection.map(item => item.ossId);
            this.single = selection.length !== 1;
            this.multiple = !selection.length;
        },
        handleHeaderClass({ column }) {
            column.order = column.multiOrder;
        },
        handleHeaderCLick(column) {
            if (column.sortable !== "custom") return;
            switch (column.multiOrder) {
                case "descending":
                    column.multiOrder = "ascending";
                    break;
                case "ascending":
                    column.multiOrder = "";
                    break;
                default:
                    column.multiOrder = "descending";
                    break;
            }
            this.handleOrderChange(column.property, column.multiOrder);
        },
        handleOrderChange(prop, order) {
            let orderByArr = this.queryParams.orderByColumn ? this.queryParams.orderByColumn.split(",") : [];
            let isAscArr = this.queryParams.isAsc ? this.queryParams.isAsc.split(",") : [];
            const propIndex = orderByArr.indexOf(prop);
            if (propIndex !== -1) {
                if (order) {
                    isAscArr[propIndex] = order;
                } else {
                    isAscArr.splice(propIndex, 1);
                    orderByArr.splice(propIndex, 1);
                }
            } else {
                orderByArr.push(prop);
                isAscArr.push(order);
            }
            this.queryParams.orderByColumn = orderByArr.join(",");
            this.queryParams.isAsc = isAscArr.join(",");
            this.getList();
        },
        handleFile() {
            this.resetFormData();
            this.open = true;
            this.title = "上传文件";
            this.type = 0;
        },
        handleImage() {
            this.resetFormData();
            this.open = true;
            this.title = "上传图片";
            this.type = 1;
        },
        handleUploadOver() {
            this.open = false;
            this.getList();
        },
        resetFormData() {
            this.form = { file: undefined };
            this.resetForm(this.$refs.ossRef);
        },
        handleOssConfig() {
            this.$router.push("/manage/ossConfig");
        },
        handlePreviewListResource(flag) {
            this.previewListResource = flag;
        },
        handleDelete(row) {
            const ossIds = row.ossId || this.ids;
            this.$modal.confirm('是否确认删除OSS对象存储编号为"' + ossIds + '"的数据项?').then(() => {
                this.loading = true;
                return delOss(ossIds);
            }).then(() => {
                this.loading = false;
                getList();
                this.modal.msgSuccess("删除成功");
            }).finally(() => {
                this.loading = false;
            });
        },
        handleDownload(row){
            this.download.oss(row.ossId);
        }
    }
}
</script>
